<template>
  <div class="right-box w100 ">
   <div class="box">
		<div class="message">
			<img src="../../../../../static/image/ShowMap/l.png" style="float:left;margin:1px 8px 0 0">
			<span class="font">在线设备数量</span>
		</div>
		<div class="number">
			<img src="../../../../../static/image/ShowMap/dish.png" class="dish">
			<div class="number-box">
				<img src="../../../../../static/image/ShowMap/1.png" style="float:left">
				<div class="number-right">
					<div class="mmp">
					<div style="font-size:14px; color:#666;white-space:nowrap;">
						<b>
							在线设备
						</b>
					</div>
					<div style="font-size:32px;color:#4883FF;">
						<b>
							{{show.iemp_online_count?show.iemp_online_count: 0}}
						</b>
					</div>
					</div>
				</div>
			</div>
		</div>
	 </div>

	 <div class="box">
		<div class="message">
			<img src="../../../../../static/image/ShowMap/l.png" style="float:left;margin:1px 8px 0 0">
			<span class="font">离线设备数量</span>
		</div>
		<div class="number">
			<img src="../../../../../static/image/ShowMap/dish.png" class="dish">
			<div class="number-box">
				<img src="../../../../../static/image/ShowMap/2.png" style="float:left">
				<div class="number-right">
					<div class="mmp">
					<div style="font-size:14px; color:#666;white-space:nowrap;">
						<b>
							离线设备
						</b>
					</div>
					<div style="font-size:32px;color:#FFAA29;">
						<b>
							{{show.all_count?show.all_count - show.iemp_online_count: 0}}
						</b>
					</div>
					</div>
				</div>
			</div>
		</div>
	 </div>

	 <div class="box">
		<div class="message">
			<img src="../../../../../static/image/ShowMap/l.png" style="float:left;margin:1px 8px 0 0">
			<span class="font">警情异常数量</span>
		</div>
		<div class="number">
			<img src="../../../../../static/image/ShowMap/dish.png" class="dish">
			<div class="number-box">
				<img src="../../../../../static/image/ShowMap/3.png" style="float:left">
				<div class="number-right">
					<div class="mmp">
					<div style="font-size:14px; color:#666;white-space:nowrap;">
						<b>
							警情异常
						</b>
					</div>
					<div style="font-size:32px;color:#2DDFEE;">
						<b>
							{{show.alert_low_pressure_count? show.alert_low_pressure_count : 0}}
						</b>
					</div>
					</div>
				</div>
			</div>
		</div>
	 </div>

	 <div class="box">
		<div class="message">
			<img src="../../../../../static/image/ShowMap/l.png" style="float:left;margin:1px 8px 0 0">
			<span class="font">传感器异常数量</span>
		</div>
		<div class="number">
			<img src="../../../../../static/image/ShowMap/dish.png" class="dish">
			<div class="number-box">
				<img src="../../../../../static/image/ShowMap/4.png" style="float:left">
				<div class="number-right">
					<div class="mmp">
					<div style="font-size:14px; color:#666;white-space:nowrap;">
						<b>
							传感器异常
						</b>
					</div>
					<div style="font-size:32px;color:#FF5141;">
						<b>
							{{show.alert_low_battery_count?show.alert_low_battery_count: 0}}
						</b>
					</div>
					</div>
				</div>
			</div>
		</div>
	 </div>

	 <div class="box" >
		<div class="message">
			<img src="../../../../../static/image/ShowMap/l.png" style="float:left;margin:1px 8px 0 0">
			<span class="font">异常设备数量</span>
		</div>
		<div class="number">
			<img src="../../../../../static/image/ShowMap/dish.png" class="dish">
			<div class="number-box">
				<img src="../../../../../static/image/ShowMap/5.png" style="float:left">
				<div class="number-right">
					<div class="mmp">
					<div style="font-size:14px; color:#666;white-space:nowrap;">
						<b>
							异常设备
						</b>
					</div>
					<div style="font-size:32px;color:#9E43FF;">
						<b>
							{{show.abnormal_count?show.abnormal_count: 0}}
						</b>
					</div>
					</div>
				</div>
			</div>
		</div>
	 </div>

	<div class="box" style='margin:0px;'>
		<div class="message">
			<img src="../../../../../static/image/ShowMap/l.png" style="float:left;margin:1px 8px 0 0">
			<span class="font">设备状态正常数量</span>
		</div>
		<div class="number">
			<img src="../../../../../static/image/ShowMap/dish.png" class="dish">
			<div class="number-box">
				<img src="../../../../../static/image/ShowMap/06.png" style="float:left">
				<div class="number-right">
					<div class="mmp">
					<div style="font-size:14px; color:#666;white-space:nowrap;">
						<b>
							正常设备
						</b>
					</div>
					<div style="font-size:32px;color:#3AE3AF;">
						<b>
							{{show.all_count?show.all_count - show.abnormal_count: 0}}
						</b>
					</div>
					</div>
				</div>
			</div>
		</div>
	 </div>

  </div>
</template>

<script>
import Config from '../../../../config'
import { mapGetters } from 'vuex'
export default {
	props:['devname'],
  name: 'RightBox',
  data: function () {
    return {
			show: {} // 数据展示
    }
	},
	 watch: {
    '$store.state.user.district.city_name'(data) {
      this.get_show()
		},
		devname(data) {
			this.get_show()
		}
  },
  methods: {
    // 展示数据
		get_show() {

			// 场所管理员
      if (this.district.areaCode) {
        let params = {devtype: Config.objType.devtype, devname: this.devname, site_id: this.district.districtId};
				this.search(params)

      } else if (this.district.cityCode){ // 市
				let params = {devtype: Config.objType.devtype, devname: this.devname, city: this.district.cityCode};
				this.search(params)

      } else if (this.district.provinceCode) {
				let params = {devtype: Config.objType.devtype, devname: this.devname, province: this.district.provinceCode};
				this.search(params)
			} else {
				let params = {devtype: Config.objType.devtype, devname: this.devname, city: this.district.city[this.district.city.length - 1]};
				this.search(params)
			}
		},
		// 数据
		search(params) {
			// 处理空对象
      for (let i in params) {
        if (params[i] == "" || params[i] == null) {
          params[i] = undefined;
          // console.log(this.formR[i])
        }
      }
			// 判断权限 test//神//凡人
      if (this.$store.state.user.role[0].sort === 93) {
        params.site_type='test'
      }else if (this.$store.state.user.role[0].sort !== 100) {
        params.site_type='official'
			}

			let url = `${Config.DEVICE_MANAGE_URL}/device_stie_user/count`;
			this.$http.get(url, params).then(res => {
				this.show = res
			});
		}
  },
  computed: {
    ...mapGetters('user', {
      module: 'dealedModule',
      user: 'getUser',
      role: 'getRole',
      district: 'getDistrict'
    })
  },
  mounted() {
		// console.log('getDistrict ', this.district)
		if (this.$store.state.user.district.city) {
			this.get_show()
		}
		if (this.$store.state.user.district.areaCode) {
			this.get_show()
		}
  }
}
</script>
<style lang="scss" scoped>
@import "../../../../../static/scss/common";
.right-box{
	width: 100%;
	height: 146px;
	.box{
		float: left;
    width: 15.65%;
    height: 100%;
    background: #fff;
    margin-right: 1.2%;
    box-sizing: border-box;
    padding: 12px;
		.message{
			width: 100%;
			height: 31px;
			border-bottom: 1px solid #F2F2F2;
			.font{
				color: $gray6;
				font-size: 14px;
				font-weight: bold;
			}
		}
		.number{
			height: calc(100% - 30px);
			width: 100%;
			display: inline-block;
			margin: auto;
			position: relative;
			.number-box{
				width: 90%;
				height: 90%;
				position: absolute;
				margin: auto auto 0;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				img{
					height: 100%
				}
				.number-right{
					float: left;
					height: 100%;
					// width: 40%;
					position: relative;
					.mmp{
						width: 100%;
						height: 62px;
						position: absolute;
						margin: auto;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
					}
				}
			}
			.dish{
				width: 64px;
				height: 76px;
				position: absolute;
				right: -12px;
				bottom: -12px
			}
		}
	}
}

</style>
